<!--子向父传递过程：   在子组件中，通过$emit("事件名称",传递的参数)来触发事件    在父组件中，使用v-on:监听的事件名=“监听到这个事件以后要触发的函数（）”-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
<!--  父组件监听到来自子组件的itemclick（包含了item参数）时，调用cpnClick方法（包含item参数） -->
  <cpn v-on:itemclick="cpnClick"></cpn>
</div>

<!--2.子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const cpn = {
      template:'#cpn',
      data(){
          return{
              categories:[
                  {id:'aaa', name:'热门推荐'},
                  {id:'bbb', name:'手机数码'},
                  {id:'ccc', name:'家用家电'},
                  {id:'ddd', name:'电脑办公'},
              ]
          }
      },
      methods:{
          btnClick(item){
              //子组件发送一个事件this.$emit("这个事件的名称",传递的参数)自定义事件
              this.$emit("itemclick",item)
          }
      },
  }


    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀'
        },
        components:{
            cpn,
        },
        methods:{
            //实例调用cpnClick时，接收item参数
            cpnClick(item){
                console.log("cpnClick", item)
            }
        }
    })




</script>

</body>
</html>